/*
 * @Author: jiu yin
 * @Date: 2024-06-03 18:01:38
 * @LastEditTime: 2024-06-06 17:19:39
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\home\component\DataOverview.tsx
 * jiu
 */
import homeIcon3 from "@/assets/image/homeIcon3.png";
import { UserOutlined, PayCircleOutlined } from "@ant-design/icons";
import { Badge, Radio } from "antd";
import { PieChart } from "react-minimal-pie-chart";
import "../index.scss";
import { program_data_overview, ticket_order_data_overview, income_data_overview, seat_balance } from "@/api/home";
import { useEffect, useState } from "react";

export default function DataOverview() {
	//场景播控
	let [program_data, set_program_data] = useState<any>({});
	let [program_radio, set_program_radio] = useState<any>(1);
	let [is_program_value, set_is_program_value] = useState<any>(false);
	useEffect(() => {
		program_data_overview({ status: program_radio }).then((res: any) => {
			set_program_data(res.data);
			// 判断全部是否为空
			let is_value = Object.values(res.data).every((item: any) => item == 0);
			set_is_program_value(is_value);
		});
	}, [program_radio]);

	//订单出票
	let [order_data, set_order_data] = useState<any>({});
	let [order_radio, set_order_radio] = useState<any>(1);
	useEffect(() => {
		ticket_order_data_overview({ status: order_radio }).then((res: any) => {
			set_order_data(res.data);
		});
	}, [order_radio]);

	//VR设备情况
	let [seat_data, set_seat_data] = useState<any>({});
	let [is_seat_value, set_is_seat_value] = useState<any>(false);
	useEffect(() => {
		seat_balance().then((res: any) => {
			set_seat_data(res.data);
			let data={
				normal_use: res.data.normal_use,
				normal_idle: res.data.normal_idle,
				abnormal: res.data.abnormal,
			}
			// 判断全部是否为空
			let is_value = Object.values(data).every((item: any) => item == 0);
			set_is_seat_value(is_value);
		});
	}, []);

	//营收信息
	let [income_data, set_income_data] = useState<any>({});
	useEffect(() => {
		income_data_overview().then((res: any) => {
			set_income_data(res.data);
		});
	}, []);
	return (
		<section>
			<div className="text-20px font-700 flex items-center">
				<img src={homeIcon3} alt="" className="w-28px h-28px" />
				<span className="c-#161940 ml-10px">数据概览 </span>
			</div>
			<ul className="grid grid-cols-2 gap-20px mt-10px">
				<li className="bg-#F7F8FF border-rd-12px box-border  pt-15px pb-15px">
					<div className="flex justify-between ml-24px mr-24px">
						<p className="homeData1 c-#161940 text-16px font-700 indent-32px">场景播控</p>
						<Radio.Group defaultValue={1} size="small" onChange={(e: any) => set_program_radio(e.target.value)}>
							<Radio.Button value={1}>今日</Radio.Button>
							<Radio.Button value={2}>全部</Radio.Button>
						</Radio.Group>
					</div>
					<ul className="grid grid-cols-4  items-center mt-24px">
						<li className="flex flex-col items-center ">
							<div className="w-56px h-56px ">
								<PieChart
									lineWidth={50}
									animate={true}
									data={
										is_program_value
											? [{ title: "one", value: 1, color: "#DCDDE3" }]
											: [
													{ title: "One", value: program_data.alive_num || 0, color: "#5864FF" },
													{ title: "Two", value: program_data.fallow_num || 0, color: "#25C2B2" },
													{ title: "Three", value: program_data.dead_num || 0, color: "#DCDDE3" },
											  ]
									}
								/>
							</div>
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#161940 text-28px font-700 ">{program_data.alive_num}</p>
							<Badge color="#5864FF" text="运行中" />
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#25C2B2 text-28px font-700">{program_data.fallow_num}</p>
							<Badge color="#25C2B2" text="待运行" />
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#DCDDE3 text-28px font-700">{program_data.dead_num}</p>
							<Badge color="#DCDDE3" text="已结束" />
						</li>
					</ul>
				</li>

				<li className="bg-#F7F8FF border-rd-12px box-border  pt-15px pb-15px">
					<div className="flex justify-between ml-24px mr-24px">
						<p className="homeData2 c-#161940 text-16px font-700 indent-32px">订票/出票</p>
						<Radio.Group defaultValue={1} size="small" onChange={(e: any) => set_order_radio(e.target.value)}>
							<Radio.Button value={1}>今日</Radio.Button>
							<Radio.Button value={2}>全部</Radio.Button>
						</Radio.Group>
					</div>
					<ul className="grid grid-cols-4  items-center mt-24px">
						<li className="flex flex-col items-center ">
							<p className="c-#161940 text-28px font-700 ">{order_data.wait_verify_order_num}</p>
							<Badge color="#5864FF" text="待出票订单" />
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#25C2B2 text-28px font-700">{order_data.hand_verify_order_num}</p>
							<Badge color="#25C2B2" text="已出票订单" />
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#161940 text-28px font-700 ">{order_data.wait_use_ticket_num}</p>
							<Badge color="#5864FF" text="待使用入场券" />
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#25C2B2 text-28px font-700">{order_data.hand_use_ticket_num}</p>
							<Badge color="#25C2B2" text="已使用入场券" />
						</li>
					</ul>
				</li>

				<li className="bg-#F7F8FF border-rd-12px box-border  pt-15px pb-15px">
					<div className="flex justify-between ml-24px mr-24px">
						<p className="homeData3 c-#161940 text-16px font-700 indent-32px">VR设备情况</p>
					</div>
					<ul className="grid grid-cols-4  items-center mt-24px">
						<li className="flex flex-col items-center ">
							<div className="w-56px h-56px ">
								<PieChart
									lineWidth={50}
									animate={true}
									data={
										is_seat_value
											? [{ title: "one", value: 1, color: "#DCDDE3" }]
											: [
													{ title: "One", value: seat_data.normal_use || 0, color: "#5864FF" },
													{ title: "Two", value: seat_data.normal_idle || 0, color: "#25C2B2" },
													{ title: "Three", value: seat_data.abnormal || 0, color: "#FF606B" },
											  ]
									}
								/>
							</div>
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#161940 text-28px font-700 ">{seat_data.normal_use}</p>
							<Badge color="#5864FF" text="使用中" />
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#25C2B2 text-28px font-700">{seat_data.normal_idle}</p>
							<Badge color="#25C2B2" text="当前空闲" />
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#FF606B text-28px font-700">{seat_data.abnormal}</p>
							<Badge color="#FF606B" text="异常" />
						</li>
					</ul>
				</li>

				<li className="bg-#F7F8FF border-rd-12px box-border  pt-15px pb-15px">
					<div className="flex justify-between ml-24px mr-24px">
						<p className="homeData4 c-#161940 text-16px font-700 indent-32px">营业额</p>
					</div>
					<ul className="grid grid-cols-4  items-center mt-24px">
						<li className="flex flex-col items-center">
							<p className="c-#161940 text-28px font-700 ">{income_data.today_member}</p>
							<p className="c-#5C5F7A text-14px ">
								<UserOutlined style={{ marginRight: 8 }} />
								今日体验人数
							</p>
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#161940 text-28px font-700 ">{income_data.total_member}</p>
							<p className="c-#5C5F7A text-14px ">
								<UserOutlined style={{ marginRight: 8 }} />
								累计体验人数
							</p>
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#161940 text-28px font-700 ">{income_data.today_income}</p>
							<p className="c-#5C5F7A text-14px ">
								<PayCircleOutlined style={{ marginRight: 8 }} />
								今日销售额(¥)
							</p>
						</li>
						<li className="flex flex-col items-center">
							<p className="c-#161940 text-28px font-700 ">{income_data.total_income}</p>
							<p className="c-#5C5F7A text-14px ">
								<PayCircleOutlined style={{ marginRight: 8 }} />
								累计销售额(¥)
							</p>
						</li>
					</ul>
				</li>
			</ul>
		</section>
	);
}
